<template>
  <div style="padding: 30px">
    <!-- 参赛运动员数量 -->
    <el-form
      ref="ruleFormRef"
      :model="queryParams"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      :inline="true"
      status-icon
    >
      <el-form-item>
        <!-- <el-button @click="verification" type="primary" icon="Refresh">核销</el-button> -->
        <el-button @click="pass" type="primary" v-if="verityStatus==1"  icon="Check">审核通过</el-button>
        <el-button @click="refused" type="warning" v-if="verityStatus==1"  icon="Close">审核拒绝</el-button>
      </el-form-item>
    </el-form>
    <br />
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        label="序号"
        width="50"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        label="选手姓名"
        min-width="80"
        prop="playerName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="性别"
        min-width="80"
        prop="sexStr"
        align="center"
      ></el-table-column>
      <el-table-column
        label="手机号"
        min-width="120"
        prop="telNo"
        align="center"
      ></el-table-column>
      <el-table-column
        label="证件类型"
        min-width="120"
        prop="idcTypeStr"
        align="center"
      ></el-table-column>
      <el-table-column
        label="证件号"
        min-width="220"
        prop="idcCode"
        align="center"
      ></el-table-column>
      <el-table-column
          label="机构类型"
          min-width="120"
          prop="groupTypeStr"
          align="center"
      ></el-table-column>
      <el-table-column
          label="机构简称"
          prop="abreviations"
          min-width="100"
          align="center"
      >
      </el-table-column>
      <el-table-column
          label="机构名称"
          prop="groupName"
          min-width="100"
          align="center"
      >
        <template #default="props">
          <div>
            {{ props.row.groupName || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="队伍"
        min-width="120"
        prop="teamName"
        align="center"
      >
        <template #default="props">
          <div>
            {{ props.row.teamName || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="教练" min-width="100" prop="coach" align="center">
        <template #default="props">
          <div>
            {{ props.row.coach || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="领队" width="100" prop="leader" align="center">
        <template #default="props">
          <div>
            {{ props.row.leader || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="队医" width="100" prop="teamDoctor" align="center">
        <template #default="props">
          <div>
            {{ props.row.teamDoctor || "/" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="翻译" width="100" prop="translator" align="center">
        <template #default="props">
          <div>
            {{ props.row.translator || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="官员" width="100" prop="official" align="center">
        <template #default="props">
          <div>
            {{ props.row.official || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="其他" width="100" prop="other" align="center">
        <template #default="props">
          <div>
            {{ props.row.other || "/" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in list"
        :key="index"
        :label="item.key"
        min-width="120"
        align="center"
      >
        <template #default="props">
          <div v-if="props.row.personInfoList[index].type == 2">
            <a
              target="_blank"
              :href="props.row.personInfoList[index]?.value?.url"
              v-if="props.row.personInfoList[index]?.value?.name"
              >{{ props.row.personInfoList[index]?.value?.name }}</a
            >
            <div v-else>/</div>
          </div>

          <div v-else-if="props.row.personInfoList[index].type == 3">
            <el-image
              v-if="props.row.personInfoList[index]?.value"
              style="width: 80px; height: 80px"
              :src="props.row.personInfoList[index]?.value"
              :fit="fit"
              @click="imgFN(props.row.personInfoList[index]?.value)"
            />
            <div v-else>/</div>
          </div>

          <div v-else>
            <div v-if="props.row.personInfoList[index].value">
              {{ props.row.personInfoList[index].value }}
            </div>
            <div v-else>/</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="参赛项目"
        min-width="240"
        prop="projectName"
        align="center"
      >
        <template #default="props">
          <div v-html="props.row.projectName"></div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="toggle"
        label="状态"
        min-width="100"
        prop="signStatusStr"
        align="center"
      ></el-table-column>
      <el-table-column
        label="操作"
        min-width="100"
        fixed="right"
        align="center"
        v-if="toggle"
      >
        <template #default="scope">
          <el-button
            type="text"
            v-if="scope.row.clearFlag != 1 && scope.row.signStatus == 0"
            @click="DelFN(scope.row)"
            >清除</el-button
          >
          <el-button type="text" disabled v-else>清除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
    v-model="imgDialog"
    title=""
    width="50%"
    v-if="imgDialog"
    >
    <el-image style="width: 100%; height: 100%;" :src="bigImg" :fit="fit" />
    </el-dialog>


    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import {freeChargeDetail, checkCancel, verityOrder } from "@/api/match/review.js";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { onActivated, ref } from "vue";
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const toggle = ref(false);
const tableData = ref([]);
const total = ref(0);
const loading = ref(true);
const list = ref([]);
const bigImg=ref()
const verityStatus=ref()
const verityStatusStr = ref()
const imgDialog=ref(false)
const data = reactive({
  queryParams: {
    orderId: route.query.orderId,
    pageNum: 1,
    pageSize: 10,
  },
});
const { queryParams } = toRefs(data);
onMounted(() => {
  getList();
  verityStatusStr.value=route.query.verityStatusStr
  verityStatus.value=route.query.verityStatus
});

async function getList() {
  tableData.value = [];
  let num=0
  loading.value = true;
  let res = await freeChargeDetail(queryParams.value);
  loading.value = false;
  if (res.rows.length > 0) {
    for (const item of res.rows) {
     for (const val of item.personInfoList) {
      if (val.type==2) {
        val.value=JSON.parse(val.value)
       }
      
      }  
     if (item.personInfoList.length>num) {
       num = item.personInfoList.length
       list.value = item.personInfoList
     }
    }
  }
  tableData.value = res.rows;
  total.value = res.total;
}

// 审核通过
async function pass() {
 
  let res = await checkCancel({orderId:route.query.orderId,flag:'1'});
  if (res.code == 200) {
    proxy.$modal.msgSuccess("操作成功");
    verityStatus.value=undefined
  } else {
    proxy.$modal.msgError("操作失败");
  }
  getList();
}

// 审核拒绝
async function refused() {
 
  let res = await checkCancel({orderId:route.query.orderId,flag:'2'});
  if (res.code == 200) {
    proxy.$modal.msgSuccess("操作成功");
    verityStatus.value=undefined
  } else {
    proxy.$modal.msgError("操作失败");
  }
  getList();
}

// 图片预览
function imgFN(url) {
  bigImg.value = url
  imgDialog.value=true
}

</script>

<style scope></style>
